<template>
  <div>
    <el-scrollbar height="calc(100vh - 240px)" v-if="defaultFileArr.length">
      <div class="img_content">
        <div class="block_img" v-for="(fItem, fIndex) in defaultFileArr" :key="fIndex">
          <div class="file_img">
            <img :src="fItem.file_url" />
            <span class="set_default" v-if="fItem.is_default==1">
             <el-icon><Flag /></el-icon>
            </span>
              <span class="opration_icon" @click="prevewImg(fIndex)">
                        <el-icon><ZoomIn /></el-icon
              ></span>
            <div class="box_shadow_title" >
                <div class="box_no">排序:{{fItem.sort}}</div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>

    <div class="empty" v-else >
        <div >
          <img :src="EmptyPng" style="object-fit: cover; height: 130px" />
        </div>
      </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import EmptyPng from "@/assets/images/empty.png";
import { api as viewerApi } from "v-viewer";
const defaultFileArr = defineModel<Array<Record<string, any>>>({ default: [] });
//查看
const prevewImg = index => {
  console.log(defaultFileArr.value);

  viewerApi({
    images: defaultFileArr.value,
    options: {
      toolbar: true,
      url: "file_url",
      fullscreen: false,
      initialViewIndex: index //默认打开哪个
    }
  });
};

</script>
<style lang="scss" scoped>
@import url("./look.scss");
</style>
